<template>
	<view class="container">
		<view class="head-bg"></view>
		
		<view class="list">
			<view v-for="(item,index) in data" :key="index" class="list-box" @click="toDetail(item.id)">
				<u-image :src="item.bg_url" width="100%" height="300" border-radius="5" shape="aspectFill">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="desc">
					<view class="title u-line-1">{{item.title}}{{item.title}}{{item.title}}{{item.title}}</view>
					<view class="info">
						<u-image src="/static/image/hot.png" loading-icon="/static/image/hot.png" width="40" height="40" :lazy-load="false" :fade="false">
						</u-image>
						{{item.number_count}}人参与，已投{{item.vote_count}}票
					</view>
					<view class="time">{{item.end_time}} 结束</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
			};
		},
		onLoad() {
			this.getData();
		},
		methods:{
			getData(){
				let data = [];
				
				for(var i=0;i<20;i++){
					data.push({
						id: i,
						title: 'XXX学校校花校草评选',
						number_count: 1000,
						vote_count: 10000,
						end_time: '2022-05-01 12:00:01',
						bg_url: '/static/image/bg.png'
					})
				}
				
				this.data = data;
			},
			toDetail(id){
				uni.navigateTo({
					url: '/pages/vote/show?id=' + id
				})
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(){
			console.log('more');
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
			
		.head-bg{
			position: fixed;
			top: 0;
			width: 100%;
			height: 200rpx;
			background-image: linear-gradient(#f96770, #fc587d);
			border-radius: 0 0 20% 20%;
			z-index: -1;
		}
			
		.list{
			z-index: 99;
			padding: 20rpx 30rpx;
			
			.list-box{
				background-color: #fff;
				border-radius: 15rpx;
				margin-top: 30rpx;
				box-shadow: 0 0 2px rgb(221, 221, 221);
				.desc{
					padding: 20rpx 30rpx;
					font-size: 30rpx;
					.info{
						padding: 15rpx 0;
						display: flex;
						align-items: center;
					}
					.time{
						color: #909399;
						font-size: 25rpx;
					}
				}
			}
			.list-box:first-child{
				margin-top: 0px;
			}
		}
	}
</style>
